import { defineConfig, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-bte-cen': 'flex flex-justify-between flex-items-center',
    'flex-bte-str': 'flex flex-justify-between flex-items-start',
    'flex-sta-cen': 'flex flex-justify-start flex-items-center',
    'flex-cen-cen': 'flex flex-justify-center flex-items-center',
  },
  presets: [presetUno(), presetAttributify()],
  rules: [
    [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px` })],
    [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px` })],
    [/^wh-(\d+)$/, ([, d]) => ({ width: `${d}px`, height: `${d}px` })],
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
    [/^p-(\d+)$/, ([, d]) => ({ padding: `${d}px` })],
    [/^mx-(\d+)$/, ([, d]) => ({ 'margin-left': `${d}px`, 'margin-right': `${d}px` })],
    [/^my-(\d+)$/, ([, d]) => ({ 'margin-top': `${d}px`, 'margin-bottom': `${d}px` })],
    [/^mt-(\d+)$/, ([, d]) => ({ 'margin-top': `${d}px` })],
    [/^mb-(\d+)$/, ([, d]) => ({ 'margin-bottom': `${d}px` })],
    [/^ml-(\d+)$/, ([, d]) => ({ 'margin-left': `${d}px` })],
    [/^mr-(\d+)$/, ([, d]) => ({ 'margin-right': `${d}px` })],
    [/^px-(\d+)$/, ([, d]) => ({ 'padding-left': `${d}px`, 'padding-right': `${d}px` })],
    [/^py-(\d+)$/, ([, d]) => ({ 'padding-top': `${d}px`, 'padding-bottom': `${d}px` })],
    [/^pt-(\d+)$/, ([, d]) => ({ 'padding-top': `${d}px` })],
    [/^pb-(\d+)$/, ([, d]) => ({ 'padding-bottom': `${d}px` })],
    [/^pl-(\d+)$/, ([, d]) => ({ 'padding-left': `${d}px` })],
    [/^pr-(\d+)$/, ([, d]) => ({ 'padding-right': `${d}px` })],
    [/^fs-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px` })],
    [/^top-(\d+)$/, ([, d]) => ({ 'top': `${d}px` })],
    [/^bottom-(\d+)$/, ([, d]) => ({ 'bottom': `${d}px` })],
    [/^left-(\d+)$/, ([, d]) => ({ 'left': `${d}px` })],
    [/^right-(\d+)$/, ([, d]) => ({ 'right': `${d}px` })],
    [/^rounded-(\d+)$/, ([, d]) => ({ 'border-radius': `${d}px` })],
    [/^text-ellipsis-(\d)$/, ([, d]) => ({ 'text-overflow': `ellipsis`,  'display': '-webkit-box',  'overflow': 'hidden', '-webkit-line-clamp': d, '-webkit-box-orient': 'vertical'})],
  ]
})
